<!--
* Description: 日志列表主页面
* Company: 联宝（合肥）电子科技有限公司
* Author: Dongxu.Ni
* Date: 2020/3/9 18:40
-->

<template>
  <BaseWrap>
    <!-- 查询条件 -->
    <BaseFunc
      :is-requesting="isRequesting"
      :query-form="queryForm"
      :visible.sync="advanceOptionDrawer"
      @query="query"
    >
      <template>
        <!--抽屉内部查询表单-->
        <el-form class="g-advance-drawer-form" label-width="100px" :model="queryForm" size="small">
          <el-row>
            <el-col :span="6">
              <el-form-item :label="$t('Logger.session')">
                <el-input
                  v-model="queryForm.session"
                  clearable
                  :placeholder="$t('input.placeholder')"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('record.operateUser')">
                <el-select
                  v-model="queryForm.operateUser"
                  clearable
                  filterable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['user/getUserSimpleCollects']"
                    :key="item.userId"
                    :label="item.userName"
                    :value="item.userId"
                  >
                    <span style="float: left;">{{ item.userName }}</span>
                    <span style="float: right; color: #b4b4b4; font-size: 12px">
                      {{ item.team }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('record.operateTimeBegin')">
                <el-date-picker
                  v-model="queryForm.operateTimeBegin"
                  :placeholder="$t('timePicker.placeholderTimeBegin')"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss[.000]"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('record.operateTimeEnd')">
                <el-date-picker
                  v-model="queryForm.operateTimeEnd"
                  :placeholder="$t('timePicker.placeholderTimeEnd')"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss[.999]"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item :label="$t('Logger.apiPath')">
                <el-select
                  v-model="queryForm.apiPath"
                  clearable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['api/getApiCollects']"
                    :key="item.apiPath"
                    :label="item.apiName"
                    :value="item.apiPath"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('Logger.menu')">
                <el-select
                  v-model="queryForm.menu"
                  clearable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['menu/getSessionPostMenuList']"
                    :key="item.menuId"
                    :label="item.menuName"
                    :value="item.menuId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('Logger.isSuccess')">
                <el-select
                  v-model="queryForm.isSuccess"
                  clearable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['dict/dictOptions']('YN')"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('Logger.isPageVisit')">
                <el-select
                  v-model="queryForm.isPageVisit"
                  clearable
                  :placeholder="$t('select.placeholder')"
                >
                  <el-option
                    v-for="item in $store.getters['dict/dictOptions']('YN')"
                    :key="item.code"
                    :label="item.value"
                    :value="item.code"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </BaseFunc>
    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
      @query="query"
    >
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed label="NO" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <template>
        <!-- 操作时间 -->
        <el-table-column
          align="center"
          :label="$t('record.operateTime')"
          min-width="300"
          prop="operateTime"
        />
        <!-- 操作人 -->
        <el-table-column
          align="center"
          :label="$t('record.operateUser')"
          min-width="150"
          prop="operateUser"
        >
          <template slot-scope="scope">
            <span>
              {{
                $store.getters['user/getUserNameById'](scope.row.operateUser) ||
                  $t('result.unknown')
              }}
            </span>
          </template>
        </el-table-column>
        <!-- 请求菜单 -->
        <el-table-column align="center" :label="$t('Logger.menu')" min-width="250">
          <template slot-scope="scope">
            <span>
              {{ $store.getters['menu/getMenuNameById'](scope.row.menu) || $t('result.unknown') }}
            </span>
          </template>
        </el-table-column>
        <!-- 请求接口 -->
        <el-table-column align="center" :label="$t('Logger.apiPath')" min-width="250">
          <template slot-scope="scope">
            <span>
              {{
                $store.getters['api/getApiNameByPath'](scope.row.apiPath) || $t('result.unknown')
              }}
            </span>
          </template>
        </el-table-column>
        <!-- 是否成功 -->
        <el-table-column align="center" :label="$t('Logger.isSuccess')" min-width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.isSuccess" class="tag-green">
              {{ $t('result.success') }}
            </span>
            <span v-if="!scope.row.isSuccess" class="tag-red">
              {{ $t('result.fail') }}
            </span>
          </template>
        </el-table-column>
        <!-- 访问方式 -->
        <el-table-column align="center" :label="$t('Logger.visitMode')" min-width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.isPageVisit" class="tag-green">{{ $t('Logger.pageVisit') }}</span>
            <span v-else-if="scope.row.isPageVisit === false" class="tag-blue">
              {{ $t('Logger.softVisit') }}
            </span>
            <span v-else class="tag-red">{{ $t('result.unknown') }}</span>
          </template>
        </el-table-column>
        <!-- 所属会话 -->
        <el-table-column
          align="center"
          :label="$t('Logger.session')"
          show-overflow-tooltip
          width="400"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.session || $t('result.unknown') }}</span>
          </template>
        </el-table-column>
      </template>
      <template slot="end">
        <el-table-column align="center" fixed="right" :label="$t('table.operate')" min-width="120">
          <template slot-scope="scope">
            <el-button
              v-if="$hasPer('viewDetail')"
              :key="scope.$index"
              size="mini"
              type="text"
              @click="rowDetail(scope.$index, scope.row)"
            >
              {{ $t('Logger.viewDetail') }}
            </el-button>
          </template>
        </el-table-column>
      </template>
    </BaseTable>
    <el-dialog
      v-if="detailDialogVisible"
      :append-to-body="true"
      center
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="$t('Logger.logDetail')"
      :visible.sync="detailDialogVisible"
    >
      <LogDetail :input-data="currentEditRow" />
    </el-dialog>
  </BaseWrap>
</template>

<script>
import { logPageList } from '../../../api/sys/log'
import LogDetail from './components/LogDetail'

export default {
  name: 'Logger',
  components: { LogDetail },
  props: {},
  data() {
    return {
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      // 查询表单对象
      queryForm: {
        logId: '',
        session: '',
        operateTimeBegin: '',
        operateTimeEnd: '',
        operateUser: '',
        operatePost: '',
        menu: '',
        apiPath: '',
        isSuccess: ''
      },
      // 详细信息对话框可见标识
      detailDialogVisible: false,
      // 当前编辑行的数据
      currentEditRow: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.pageDataInit()
  },
  mounted() {},
  methods: {
    /* 数据初始化*/
    pageDataInit() {
      this.query()
    },
    /* 查询表格数据*/
    async query() {
      this.advanceOptionDrawer = false
      try {
        this.isRequesting = true
        const response = await logPageList({
          pageSize: this.pageSize,
          pageNumber: this.pageNumber,
          pageCondition: this.queryForm
        })
        this.tableData = response.data.list
        this.total = response.data.total
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    rowDetail(index, row) {
      this.currentEditRow = row
      this.detailDialogVisible = true
    }
  }
}
</script>

<style scoped></style>
